<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动设置" name="first">
        <el-row>

          <div class="minwidthbox">
            <!-- 手机 -->
            <phonemode ref="phonemode" style="margin-left:80px;" :awardmoney='phoenmoney' :changeimg='changeimg' :rule1="rule1"
              :rule2="rule2" :detailList='detailList' :typeArrValue="typeArrValue" :rule3="rule3" :rule4="rule4" :rule5="rule5"
              @getText="getPhoneText"></phonemode>
      
            <div class="limits">
              <el-row v-if="infoData.is_free==0">
                <el-col :span="18">
                  <el-alert title="提示：本功能为付费项目，开通本功能前请仔细阅读功能说明及费用说明。" type="warning" show-icon>
                  </el-alert>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <el-alert v-if="infoData.step==1 && apply && apply.status==2" title="驳回" type="warning" :description="apply.back_info"
                    show-icon>
                  </el-alert>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2"><span class="title">活动进度</span></el-col>
                <el-col :span="14">
                  <el-steps :active="infoData.step" space="112px" align-center finish-status="success">
                    <el-step title="未申请"></el-step>
                    <el-step title="审核中"></el-step>
                    <el-step title="待开启"></el-step>
                    <el-step title="已上线"></el-step>
                  </el-steps>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <div class="line"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <div class="content-text">
                    <div class="content-item">
                      <p>规则配置</p>
                      <ul>
                        <li>1、好友<el-select v-model="params.rule_friend" placeholder="请选择" style="width: 130px;"
                            :disabled="infoData.step!=3" value-key="value" @change="changerule_friend">
                            <el-option v-for="item in ptionOne" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>后立即获得一张
                          <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                              {{commandoptionDefault.title}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" placement="top-start">
                              <el-dropdown-item :command="item" :disabled="infoData.step!=3" v-for="item in commandoption"
                                :key="item.id">
                                {{item.title}}</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          <el-select v-model="params.rule_friend_rights" placeholder="请选择" style="width: 130px;"
                            :disabled="infoData.step!=3" @change="changerule_friend_rights">
                            <el-option v-for="item in optionTwo" :key="item.id" :label="item.title+(item.status.value!=1?'-'+item.status.title:'')" :disabled="item.status.value!=1" :value="item.id">
                              <span>{{item.title}}</span>
                              <span v-if="item.status.value!=1" style="color: #F56C6C">（{{item.status.title}}）</span>
                            </el-option>
                          </el-select>；
                        </li>
                        <li>2、好友<el-select v-model="params.rule_referrer" placeholder="请选择" style="width: 130px;"
                            :disabled="infoData.step!=3" @change="changerule_referrer">
                            <el-option v-for="item in ptionOne" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>后我获得一张
                          <el-dropdown @command="handleCommand2">
                            <span class="el-dropdown-link">
                              {{commandoptionDefault2.title}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" placement="top-start">
                              <el-dropdown-item :command="item" :disabled="infoData.step!=3" v-for="item in commandoption"
                                :key="item.id">
                                {{item.title}}</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          <el-select v-model="params.rule_referrer_rights" placeholder="请选择" style="width: 130px;"
                            :disabled="infoData.step!=3" @change="changerule_referrer_rights">
                            <el-option v-for="item in optionTwoBot" :key="item.id" :label="item.title+(item.status.value!=1?'-'+item.status.title:'')" :disabled="item.status.value!=1" :value="item.id" >
                              <span>{{item.title}}</span>
                              <span v-if="item.status.value!=1" style="color: #F56C6C">（{{item.status.title}}）</span>
                            </el-option>
                          </el-select>；
                        </li>

                      </ul>

                    </div>
                    <div class="content-item">
                      <p>线上展示</p>
                      <div class="content-item-children">
                        <p>邀请奖励</p>
                        <ul>
                          <li>
                            <el-row>
                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>1、</span>
                                  <el-input v-model="rule1" :disabled="infoData.step==4"></el-input>
                                </div>
                              </el-col>
                            </el-row>
                          </li>
                          <li>
                            <el-row>
                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>2、</span>
                                  <el-input v-model="rule2" :disabled="infoData.step==4"></el-input>
                                </div>
                              </el-col>
                            </el-row>
                          </li>
                          <li>
                            <el-row>
                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>3、</span>
                                  <el-input v-model="typeArrValue" :disabled="infoData.step==4" placeholder="请根据选择的优惠券类型点击右侧选择对应模板(可多选)"
                                    clearable></el-input>
                                </div>
                              </el-col>
                              <el-col :span="2" style="margin-left: 10px;">
                                <el-dropdown @command="handleCommandtypeArr">
                                  <span class="el-dropdown-link">
                                    选择模板<i class="el-icon-arrow-up el-icon--right"></i>
                                  </span>
                                  <el-dropdown-menu slot="dropdown" placement="top-start">
                                    <el-dropdown-item :command="item" :disabled="infoData.step==4" v-for="item in typeArroption"
                                      :key="item.type">
                                      {{item.title}}</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              </el-col>
                            </el-row>
                          </li>
                        </ul>
                        <p>邀请规则</p>
                        <ul>
                          <li>
                            <el-row>

                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>1、</span>
                                  <el-input v-model="rule3" :disabled="infoData.step==4"></el-input>
                                </div>
                              </el-col>
                            </el-row>
                          </li>
                          <li>
                            <el-row>
                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>2、</span>
                                  <el-input v-model="rule4" :disabled="infoData.step==4"></el-input>
                                </div>
                              </el-col>
                            </el-row>
                          </li>
                          <li>
                            <el-row>
                              <el-col :span="14">
                                <div class="ruleItem">
                                  <span>3、</span>
                                  <el-input v-model="rule5" :disabled="infoData.step==4"></el-input>
                                </div>
                              </el-col>
                            </el-row>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>

                </el-col>
              </el-row>
              <el-row>

                <el-col>
                  <el-button  type="primary" :disabled="infoData.step==2 || !checkPermission(['recommendOperate'])"
                    :class="infoData.step==2?'submitBtn addColorBtn':'submitBtn'" @click="submitRuler">
                    <span v-if="infoData.step==1">立即申请</span>
                    <span v-if="infoData.step==2">审核中</span>
                    <span v-if="infoData.step==3">立即开启</span>
                    <span v-if="infoData.step==4">下线</span>
                  </el-button>
                </el-col>

              </el-row>
            </div>
       </div>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="推荐记录" name="second" v-if="checkPermission(['recommendHistory'])">
        <!-- 表格 -->
        <studenttablehead :tabData='listData' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange'
          v-if="issuccess">

          <el-table-column prop="coupon_id" label="学员奖励" align="center">
          </el-table-column>
          <el-table-column prop="status" label="使用状态" align="center">
          </el-table-column>
          <el-table-column prop="manage.name" label="推荐人" align="center">
          </el-table-column>
          <el-table-column prop="manage.type" label="推荐人类型" align="center">
          </el-table-column>
          <el-table-column prop="manage.coupon" label="推荐人奖励" align="center">
          </el-table-column>
          <el-table-column prop="manage.status" label="推荐人奖励状态" align="center">
          </el-table-column>
        </studenttablehead>
      </el-tab-pane>
    </el-tabs>
    <div class="backBtn" @click="backActivity"><img src="../../../assets/schooladmin/back.png" alt=""></div>
  </div>
</template>

<script>
  import phonemode from './component/phonemode'

  //按钮权限验证
  import checkPermission from "@/utils/permission";
  //api
  import {
    recommendconfig,
    edittrylearnconfig,
    couponoption,
    activitysettingRule,
    activitycloseActivity,
    getrecord
  } from '@/api/coupon'
  import {
    getactivityread,
    activityapply
  } from '@/api/activity'
  //学员表格
  import studenttablehead from '@/components/studenthead'

  export default {
    data() {
      return {
        //页码
        page: 1,
        typeArrValue: '',
        //翻页总数
        total: 10,
        issuccess: false,
        changeimg: 'gd',
        rule3: '每个用户只有首次打开推荐链接可获得优惠，即：每个用户只有一次被推荐机会；',
        rule4: '分享给不同好友均有机会获得学车代金券；',
        rule5: '万骏驾考保留本活动的最终解释权。',
        //右侧手机显示金额
        phoenmoney: undefined,
        money: null,
        typeMoney: null,
        typeMaxMoney: null,
        rule_friendStr: '首次打开页面',
        rule_referrerStr: '报名任何班型',
        rule_friend_rightsStr: '****',
        rule_referrer_rightsStr: '****',
        handleCommandStr: '代金券',
        handleCommandStr2: '代金券',
        shiwuStr: null,
        shiwuStr2: null,
        params: {
          rule_friend: 2,
          rule_friend_rights: null,
          rule_referrer: 1,
          rule_referrer_rights: null,
        },
        //tabs切换
        activeName: 'first',
        ptionOne: [{
            label: '报名任何班型',
            value: 1
          },
          {
            label: '首次打开页面',
            value: 2
          }
        ],
        typeArroption: [{
          title: '学费代金券可用于支付学车过程中发生的所有费用，包括：报名费、训练费、模拟费、考试费、陪练费等；',
          type: '学车券'
        }, {
          title: '报名代金券仅可抵扣报名费用；',
          type: '报名券'
        }, {
          title: '练车代金券仅可抵扣练车费用；',
          type: '练车券'
        }, {
          title: '模拟代金券仅可抵扣模拟考试费用；',
          type: '模拟券'
        }, {
          title: '考试代金券仅可抵扣考试费用，包括首次考试费及补考费；',
          type: '考试券'
        }, {
          title: '陪练代金券仅可抵扣陪练费用；',
          type: '陪练券'
        }, ],
        commandoptionDefault: {
          title: '代金券',
          id: 155
        },
        commandoptionDefault2: {
          title: '代金券',
          id: 155
        },
        commandoption: [{
            title: '代金券',
            id: 155
          },
          {
            title: '实物券',
            id: 156
          },
          {
            title: '现金券',
            id: 157
          },
        ],
        shiwuId: '',
        shiwuId2: '',
        optionTwo: [],
        optionTwoBot: [],
        detailList: [],
        apply: {},
        infoData: {},
        readId: null,
        listData: {},
        typeArr: [],
        handleCommandStr2Type: '',
        handleCommandStrType: '',
        rule1: '',
        rule2: '',
      }
    },
    methods: {
      checkPermission,
      //翻页 一页有多少条数据
      handleSizeChange(val) {
        this.total = val
        //获取数据
        this.getlistData()
      },
      //翻页码
      handleCurrentChange(val) {
        this.page = val
        //获取数据
        this.getlistData()
      },
      getPhoneText(e) {

      },
      //获取记录
      async getlistData() {
        let params = {
          page: this.page,
          rows: this.total,
          activityId: this.readId,
          _request: 'recommend'
        }
        let data = await getrecord(params)
        if (data.code == '0000') {
          this.listData = data.data
          this.issuccess = true
        }
        console.log(this.listData)
      },
      changerule_friend(e) {

        if (e == 1) {
          this.rule_friendStr = '报名任何班型'
        } else {
          this.rule_friendStr = '首次打开页面'
        }

      },
      changerule_referrer(e) {

        if (e == 1) {
          this.rule_referrerStr = '报名任何班型'
        } else {
          this.rule_referrerStr = '首次打开页面'
        }

      },

      changerule_friend_rights(e) {
        if (this.shiwuId == 156) {
          let obj = this.optionTwo.filter(item => {
            if (item.id == e) {
              return item
            }
          })
          this.shiwuStr = obj[0].coupon_thing
        } else {
          let obj = this.optionTwo.filter(item => {
            if (item.id == e) {
              return item
            }
          })
          this.shiwuStr = null
          this.rule_friend_rightsStr = obj[0].coupon_money.toString()
          this.handleCommandStr = obj[0].type

          this.handleCommandStrType = obj[0].type
          this.typeArr[0] = (obj[0].type)
        }
      },
      changerule_referrer_rights(e) {

        if (this.shiwuId2 == 156) {
          let obj = this.optionTwoBot.filter(item => {
            if (item.id == e) {
              return item
            }
          })
          this.shiwuStr2 = obj[0].coupon_thing

        } else {
          let obj = this.optionTwoBot.filter(item => {
            if (item.id == e) {
              return item
            }
          })

          this.shiwuStr2 = null
          this.rule_referrer_rightsStr = obj[0].coupon_money.toString()
          this.handleCommandStr2 = obj[0].type
          this.handleCommandStr2Type = obj[0].type
          this.typeArr[1] = (obj[0].type)
        }

      },

      //重置
      resetForm() {
        this.getrecommendconfig()
      },

      handleClick(tab, event) {
        this.page = 1
        this.total = 10
        if (tab.name == 'first') {
          this.$nextTick(async () => {
            this.activityread(this.readId)
          })
          this.getcouponoption(this.commandoption[0].id)
        } else {
          //获取领取记录
          this.getlistData()
        }
      },
      getrule_type(e) {
        console.log(e)

      },
      handleCommandtypeArr(command) {
        console.log(command)
        if (this.typeArrValue.indexOf(command.title) == -1) {
          this.typeArrValue += command.title
        }

      },
      handleCommand(command) {
        console.log(command)
        this.getcouponoption(command.id, 'one')
        this.commandoptionDefault = command
        this.shiwuId = command.id
        this.params.rule_friend_rights = null
        this.typeArr.splice(this.typeArr.indexOf(this.handleCommandStrType), 1)
      },
      handleCommand2(command) {
        console.log(command)
        this.getcouponoption(command.id, 'two')
        this.shiwuId2 = command.id
        this.commandoptionDefault2 = command
        this.handleCommandStr2 = command.title
        this.params.rule_referrer_rights = null
        this.typeArr.splice(this.typeArr.indexOf(this.handleCommandStr2Type), 1)
      },
      submitRuler() {
        if (this.infoData.step == 1) {
          this.applyactivity(this.readId)

        } else if (this.infoData.step == 2) {
          this.$message({
            message: '审核中，请耐心等待！'
          });
          return;
        } else if (this.infoData.step == 3) {
          if (!this.params.rule_friend_rights) {
            this.$message({
              type: 'error',
              message: '请选择优惠券'
            });
            return;
          }
          if (!this.params.rule_referrer_rights) {
            this.$message({
              type: 'error',
              message: '请选择优惠券'
            });
            return;
          }
          this.goactivitysettingRule()
        } else {
          this.closeActivity()
        }
      },
      //获取规则配置
      async activityread(id) {
        let params = {
          id: id,
          _request: id
        }
        let data = await getactivityread(params)
        if (data.code == '0000') {

          this.infoData = data.data
          this.apply = data.data.apply

          this.detailList = JSON.parse(data.data.apply.content  ?  data.data.apply.content : data.data.content)
          console.log( this.detailList )
          this.rule1 = this.detailList[1].text.slice(2)
          this.rule2 = this.detailList[2].text.slice(2)
          this.rule3 = this.detailList[this.detailList.length-3].text.slice(2)
          this.rule4 = this.detailList[this.detailList.length-2].text.slice(2)
          this.rule5 = this.detailList[this.detailList.length-1].text.slice(2)
          this.typeArrValue = this.detailList[3].title != 1 ? this.detailList[3].text.slice(2) : ''
          if (data.data.rule) {
            this.typeArr.push(data.data.rule.friendType)
            this.typeArr.push(data.data.rule.referrerType)
            this.handleCommandStr = data.data.rule.friendType
            this.handleCommandStr2 = data.data.rule.referrerType
            this.params.rule_friend = data.data.rule.rule_friend
            this.params.rule_friend_rights = data.data.rule.rule_friend_rights
            this.params.rule_referrer = data.data.rule.rule_referrer
            this.params.rule_referrer_rights = data.data.rule.rule_referrer_rights
          }
          // this.detaiData = data.data
          //   this.$bus.emit('detaiData', this.detaiData)
        }
      }, //切换事件

      //获取优惠券
      async getcouponoption(val, two) {
        let params = {
          category: val,
        }
        let data = await couponoption(params)

        if (data.code == '0000') {
          if (two == 'two') {
            this.optionTwoBot = data.data
          } else if (two == 'one') {
            this.optionTwo = data.data
          } else {
            this.optionTwo = data.data
            this.optionTwoBot = data.data
          }
        }
      },
      //活动设置
      async goactivitysettingRule() {
        let params = this.params
        params.apply_id = this.apply.id
        params._request = this.readId
        if (this.infoData.rule) {
          params.id = this.infoData.rule.id
        }
        let contentText = this.$refs.phonemode.parentHandleclick()
        params.content = JSON.stringify(contentText)
        let data = await activitysettingRule(params)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: data.msg
          });
          this.activityread(this.readId)
        }

      },
      //关闭活动
      async closeActivity() {

        let data = await activitycloseActivity({
          apply_id: this.apply.id,
          _request: this.readId
        })
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: '下线成功'
          });
          this.activityread(this.readId)
        }

      },
      //申请活动
      applyactivity(id) {
        this.$confirm('您确认发起申请活动吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let params = {
            id,

          }
          let data = await activityapply(params)
          if (data.code == '0000') {
            this.$message.success('发起活动成功！')
            //刷新列表
            this.activityread(this.readId)
          }
        }).catch(() => {

        });
      },
      backActivity() {
        this.$router.go(-1); //返回上一层
      },
    },
    components: {
      phonemode,
      studenttablehead
    },

    mounted() {
      //获取规则配置数据

      this.readId = this.$route.query.id
      this.$nextTick(async () => {
        this.activityread(this.readId)
      })
      this.getcouponoption(this.commandoption[0].id)
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep {
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-tabs__header {
      left: 55px;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }

    .el-tooltip {
      color: #000;
    }

    .el-alert {
      margin-bottom: 2rem;
    }

    .el-select {
      margin: 0 0.5rem;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-checkbox {
      margin-bottom: 15px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }

    .ruleradio {
      .el-radio {
        display: block;
        display: flex;
        align-items: center;
        margin: 20px 0;

        .el-input {
          margin: 0 5px;
        }

        .el-input__inner {
          padding: 0 5px;
          text-align: center;
        }

        &:last-child {
          margin-bottom: 0;
        }

        &:first-child {
          margin-top: 8px;
        }
      }
    }

    .el-step__head.is-success {
      border-color: #3388FF;
      color: #fff;

      .el-step__icon {
        background-color: #3388FF;
        color: #fff;
      }
    }

    .el-step__title.is-success {
      color: #323233
    }

    .el-step__head.is-process {
      color: #c0c4cc;
      border-color: #c0c4cc;

    }

    .el-step__title {
      font-size: 14px;
      color: #323233;
    }

    .el-step__title.is-process {
      font-weight: normal;
    }
  }

  .limits {
    margin-top: 20px;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .content-text {
      margin: 40px auto 0;

      p {
        font-weight: bold;
        font-size: 16px;
        color: #323233;
      }

      .content-item-children {
        padding-left: 20px;

        p {
          font-weight: 580;
          font-size: 15px;
        }
      }

      ul {
        li {
          text-align: justify;
          font-size: 13px;
          color: #666;
          line-height: 20px;
          margin-bottom: 10px;
          line-height: 32px;
        }
      }
    }
  }

  .ruleItem {
    display: flex;
  }

  .submitBtn {
    margin-top: 1.5rem;
  }

  .addColorBtn {
    background-color: #ff7c24;
    border: 1px solid #ff8d3c;
  }

  .line {
    height: 1px;
    background-color: #707070;
    margin-top: 30px;
  }

  .more-container {
    position: relative;
  }

  .backBtn {
    position: absolute;
    left: 20px;
    top: 19px;
    background-color: #fff;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }
  }
  .minwidthbox{
   display: flex;
   .limits{
     flex-grow: 1;
     margin-left: 40px;
     min-width:840px ;
   }
  }
</style>
